@import "./common-var.less";

.list-group-item {
  background-color: transparent;
}

.ivu-menu-light {
  background-color: transparent;
}

.ivu-btn {
  box-shadow: none;
  background: transparent;
}


.customer-set {
  font-size: 0.88rem;
  .title {
    padding: 20px 0 5px 15px;
  }

  .settings {
    display: flex;
    align-items: center;
    padding: 13px 15px;

    .context {
      height: 24px;
      line-height: 24px;
    }

    .ivu-btn-small {
      font-size: 0.8rem;
    }
  }

  /deep/ .theme-color {

    .ivu-color-picker {
      padding-left: 15px;

      .ivu-input {
        border: 1px solid @border-color_normal;
        background-color: transparent;
      }

      .ivu-color-picker-color {
        background-image: none;
      }

      .ivu-color-picker-focused {
        border-color: @primary-color;
        box-shadow: none;
      }

      div:first-child:hover .ivu-input {
        border-color: @primary-color !important;
      }

      .ivu-color-picker-color {
        margin-left: 8px;
      }

      .ivu-select-dropdown {
        left: 29% !important;
        width: 70%;

        .ivu-color-picker-picker-wrapper {
          padding: 5px 5px 0 5px;

          .ivu-color-picker-picker-panel {
            width: unset;
          }
        }

        .ivu-color-picker-confirm {
          margin: 0 5px 0 5px;

          .ivu-btn-default:hover {
            color: @primary-color;
            border-color: @primary-color;
          }

          .ivu-btn-primary {
            background: @primary-color;
          }

          .ivu-btn-small {
            padding: 0 4px;
          }

          .ivu-color-picker-confirm-color {
            left: 0;
            width: 155px;

            .ivu-input-wrapper {
              display: flex;

              .ivu-input-small {
                padding: 0 4px;
                font-size: 0.8rem;
                width: 82%;
                color: @light-font-color;
              }
            }

            &:focus {
              box-shadow: none;
            }
          }
        }
      }
    }
  }

  /deep/ .bacc-color {

    .switch-btn {
      height: 21px;
      margin-left: 13px;
      border: none;
      box-shadow: none;
      max-width: 19%;

      .ivu-switch-inner {
        line-height: 22px;
        font-size: 0.8rem;
        left: 39%;
      }
    }

    .ivu-switch:after {
      width: 35%;
      height: 87%;
      border-radius: 50%;
      transition: left .3s ease-in-out, width .3s ease-in-out;
    }

    .ivu-switch-large.ivu-switch-checked:after {
      left: 65%;
    }

    .ivu-switch-checked {
      background-color: #FA8BFF;
      background-image: linear-gradient(90deg, #FA8BFF 12%, #2BD2FF 56%, #2BFF88 90%);

      .ivu-switch-inner {
        left: 4px;
        font-size: 0.7rem;
      }
    }

    .ivu-upload {
      padding-left: 7px;
      display: flex;
      justify-content: center;

      .upload-icon {
        width: 58px;
        height: 24px;
        display: flex;
        justify-content: center;

        .iconfont {
          font-size: 1.5rem;
          color: var(--title-color);
        }

        .update-ing {
          font-size: 1.1rem;
          animation: spin 1s linear infinite;
          display: inline-block;
        }
      }
    }

    .gradient-color {
      display: flex;
      align-content: center;
      //width: 150px;
      height: 24px;
      margin-left: 6px;

      .ivu-btn-text {
        height: 24px;
        width: 28px;
        padding: 0;
        border: none;

        .i-add, .delete {
          color: var(--title-color);
        }
      }

      .ivu-btn-text[disabled] {
        background-color: transparent;
        border: none;
      }

      .colors {
        width: 90px;
      }

      .ivu-color-picker {
        .ivu-input-wrapper {
          width: 24px;
          margin-left: 5px;

          .ivu-input {
            border: none;
            box-shadow: none;
            background-color: transparent;
            color: @light-font-color;
          }

          .ivu-color-picker-color {
            @circle-size: 18px;
            border-radius: 50%;
            width: @circle-size;
            height: @circle-size;
            top: 2px;
            background-image: unset;

            div {
              border-radius: 50%;
              width: @circle-size;
              height: @circle-size;
            }
          }

          i {
            display: none;
          }
        }

        .ivu-select-dropdown {
          left: 29% !important;
          width: 70%;
          top: unset !important;
          z-index: 100;

          .ivu-color-picker-picker-wrapper {
            padding: 5px 5px 0 5px;

            .ivu-color-picker-picker-panel {
              width: unset;
            }
          }

          .ivu-color-picker-confirm {
            margin: 0 5px 0 5px;

            .ivu-input-wrapper {
              width: 100%;
            }

            .ivu-btn-default:hover {
              color: @primary-color;
              border-color: @primary-color;
            }

            .ivu-btn-primary {
              background: @primary-color;
            }
          }
        }

      }
    }

  }

  .quick-setting {
    justify-content: space-between;

    .ivu-btn {
      border: 1px solid @border-color_normal;
      width: 64px;
      padding: 0;
      color: var(--title-color);
    }

    .ivu-btn:not(:last-child) {
      margin-right: 10px;
    }

    .ivu-btn-default:hover {
      color: @primary-color;
      border-color: @primary-color;
    }

  }

  /deep/.ivu-color-picker-input {
    cursor: pointer;
  }
}

/* 定义旋转动画 */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
